<template>
<div class="flexX" v-loading="loading">
  <div class="orderContainer">
    <el-page-header @back="goBack" style="margin-left: 50px;">

    </el-page-header>

    <el-empty description="当前没有数据" v-if="data.length===0"/>

    <el-table :data="data" style="width: 100%" v-else>
      <el-table-column prop="bookName" label="书名" width="600"/>
      <el-table-column prop="date" label="购买日期" />
      <el-table-column prop="price" label="单价" />
      <el-table-column prop="count" label="数量" />
      <el-table-column prop="name" label="收货人" />
      <el-table-column prop="addr" label="收货地址" />
      <el-table-column prop="phone" label="电话号码" />
    </el-table>
  </div>
</div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import store from "@/store";
import router from "@/router";

const data = ref([])

const loading = ref(true)

const goBack = () => {
  router.push('/')
}

onMounted(() => {
  let url = `/api/order/${store.state.user.id}`
  console.log(url)
  axios.get(url)
      .then(res => {
        console.log(res , 'res')
        for (let i = 0; i < res.data.length; i++) {
          axios.get(`/api/book/getBookById/${res.data[i].bookId}`)
              .then((r) => {
                console.log(r)
                data.value.push({
                  bookName: r.data[0].name,
                  price: r.data[0].price,
                  date: res.data[i].createTime,
                  count: res.data[i].count,
                  name: res.data[i].consignee,
                  addr: res.data[i].deliveryAddress,
                  phone: res.data[i].phoneNumber
                })
              })
              .finally(() => {
                console.log(data.value)
              })
        }
      })
      .finally(() => {
        loading.value = false
      })
})
</script>

<style scoped>
.orderContainer{
  width: var(--content);
  min-height: 400px;
  background-color:white;
}

</style>